import React, {Component} from 'react';

import {NavBar, Flex, WhiteSpace, Icon} from 'antd-mobile';
import './style.scss'

class SafeCompoent extends React.Component {
    state = {
        data: [
            {
                index: 1,
                lable: '资金安全',
                active: true
            },
            {
                index: 2,
                lable: '信息安全'
            },
            {
                index: 3,
                lable: '资产优质'
            },
            {
                index: 4,
                lable: '数据安全'
            }
        ],
        dom: (
            <div style={{'height': 'auto'}}>
                <img width={'100%'} src={require('../../assets/img/meney-safe.png')} alt=""/>
            </div>
        )
    }
    renderContent = tab => {
        let dom1 = (
            <div style={{'height': 'auto'}}>
                <img width={'100%'} src={require('../../assets/img/meney-safe.png')} alt=""/>
            </div>
        )
        let dom2 = (
            <div style={{'height': 'auto'}}>
                <img width={'100%'} src={require('../../assets/img/info-safe.png')} alt=""/>
            </div>
        )
        let dom3 = (
            <div style={{'height': 'auto'}}>
                <img width={'100%'} src={require('../../assets/img/assets-safe.png')} alt=""/>
            </div>
        )
        let dom4 = (
            <div style={{'height': 'auto'}}>
                <img width={'100%'} src={require('../../assets/img/data-safe.png')} alt=""/>
            </div>
        )
        if (tab.index === 1) {
            console.log(111, tab);
            return dom1
        } else if (tab.index === 2) {
            return dom2
        } else if (tab.index === 3) {
            return dom3
        } else if (tab.index === 4) {
            return dom4
        }

    }


    render() {
        const goBack = () => {
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            if (isAndroid) {
                android.back()
            } else {
                var message = {"method": "back"};
                window.webkit.messageHandlers.ios.postMessage(message);
            }
        }
        const {data, dom} = this.state
        const activeTab = (select) => {
            let datas = JSON.parse(JSON.stringify(data))
            return datas.forEach(item => {
                    item.active = false;
                    if (item.index === select.index) {
                        item.active = true;
                        this.setState({
                            data: datas,
                            dom: this.renderContent(item)
                        })
                    }
                }
            )
        }
        return (
            <div className={'bg'}>
                <NavBar mode="light"
                        onLeftClick={() => goBack()}
                        icon={<Icon type="left"/>}
                        className='title'>安全保障</NavBar>
                <Flex>
                    {
                        data.map((item) => {
                            return <Flex.Item key={item.index}>
                                <div onClick={() => activeTab(item)} className={item.active ? 'tab-active' : 'tab'}>
                                    <div className={'tab-number'}>{item.index}</div>
                                    <div className={'tab-name'}>{item.lable}</div>
                                </div>
                            </Flex.Item>
                        })

                    }
                </Flex>
                {dom}

            </div>
        );
    }
}

export default SafeCompoent
